<template>
    <div class="show-pc">
        <div class="WaterfallFlow_item">
            <Waterfall :col="3" :data-source="list" :show-icon="false" :dataStatus="dataStatus" :loading="loading"
                 ref="WaterfallRef" @loadData="loadData">
                <template #default="{ item }">
                    <Card :item />
                </template>
            </Waterfall>
        </div>
    </div>
    <!-- 手机 -->
    <div class="show-wap">
        <div class="WaterfallFlow_item">
            <Waterfall :col="3" :data-source="list" :show-icon="false" :dataStatus="dataStatus" :loading="loading"
                ref="WaterfallRef" @loadData="loadData">
                <template #default="{ item }">
                    <Card :item />
                </template>
            </Waterfall>
        </div>
    </div>

</template>

<script setup>

import { useHttp } from '@/api/http'
// 定义接收的props
const props = defineProps({
    userData: {
        type: Object,
        required: true
    },
    config: {
        type: Object,
        default: () => ({})
    }
})


const list = ref([])
const queryParams = ref({
    pageNo: 1,
    pageSize: 15,
})
const dataStatus = ref(true)
const loading = ref(false)
const indexNum = ref(0)

const getMyLook = () => {

    indexNum.value ++
    if (!dataStatus.value || loading.value) return
    loading.value = true
    
    useHttp.get(`/web/my/myLookList`, queryParams.value).then(res => {

        loading.value = false
        if(indexNum.value === 1) {
            setTimeout(() => {
                loadData()
            }, 500);
        }
        list.value.push(...res.result.records)
        if (res.result.records.length < queryParams.value.pageSize) {
            dataStatus.value = false
        }
    })
}
setTimeout(() => {
    getMyLook()
}, 1000)
// 加载数据
const loadData = () => {
  if(list.value.length === 0) return
  queryParams.value.pageNo += 1
  getMyLook()
}

</script>

<style lang="less" scoped>
.WaterfallFlow_item {
    margin-top: 40px;
}
</style>